<template>
  <div class="page_content daraBoardStreetAnalysis_content">
    <div class="header_box p-10 bold flex flex-ac flex-jsb">
      <div class="title bold">收集点统计</div>
    </div>
    <div class="main_box m-10 ">
      <el-table :data="tableData" style="width: 100%" class="collectionPoint_content"
        :header-cell-style="{ color: '#000', background: '#f2f2f2', }">
        <el-table-column prop="name" label="收集点名称" />
        <el-table-column prop="time" label="更新时间" />
        <el-table-column label="卫生状态" sortable>
          <template #default="scope">
            <div>
              <el-tag
                :type="scope.row.status == '糟糕' ? 'danger' : scope.row.status == '一般' ? 'primary' : scope.row.status == '优秀' ? 'success' : scope.row.status == '及格' ? 'warning' : 'info'">{{
        scope.row.status }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="contact" label="联系人" />
        <el-table-column prop="information" label="联系方式" />
        <el-table-column prop="mixed" label="混头率" />
        <el-table-column prop="out" label="分出率" />
        <el-table-column prop="number" label="收集点数量" />
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>

const tableData = [
  {
    name: 'XXX',
    time: '2024/5/25',
    status: '及格',
    contact: '张三',
    information: '193333312231',
    mixed: '10%',
    out: '2',
    number: 5
  },
  {
    name: 'XXX',
    time: '2024/5/25',
    status: '一般',
    contact: '李四',
    information: '193333312231',
    mixed: '10%',
    out: '2',
    number: 5
  },
  {
    name: 'XXXX',
    time: '2024/5/25',
    status: '糟糕',
    contact: '王五',
    information: '193333312231',
    mixed: '10%',
    out: '2',
    number: 5

  },
  {
    name: 'XXXX',
    time: '2024/5/25',
    status: '一般',
    contact: '赵六',
    information: '193333312231',
    mixed: '10%',
    out: '2%',
    number: 5

  },
]
</script>

<style lang="scss" scoped>
.collectionPoint_content {
  height: 400px;


  .main_box {
    .main_echart {
      width: 100%;
      height: calc(400px - 35px - 20px);
    }
  }
}
</style>